<template>
  <div class="top-right">
    <div class="chart-title">数据趋势概览</div>
    <div class="self-tab">
      <div
        @click="clickTab('loan')"
        class="tab-row"
        :class="{ 'tab-row-active': tabName === 'loan' }"
      >
        <span class="tab-word">放款趋势</span>
      </div>
      <div
        @click="clickTab('credit')"
        class="tab-row"
        :class="{ 'tab-row-active': tabName === 'credit' }"
      >
        <span class=" tab-word">用信率趋势</span>
      </div>
    </div>
    <template v-if="tabName === 'loan'">
      <div class="chart" key="loan" id="loan" ref="loan"></div>
    </template>
    <template v-else>
      <div class="chart" key="credit" id="credit" ref="credit"></div>
    </template>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { watch } from 'fs'
import barLineEChartConfig from './barLine'
import Line2EChartConfig from './line2'
@Component({
  name: 'top-right',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private tabName = 'loan'
  private timer: any
  get computedExp() {
    //computed 属性
    return true
  }
  @Watch('tabName')
  private ontabNameChange(val: any) {
    this.$nextTick(() => {
      if (val === 'credit') {
        if (this.$refs.credit) {
          let chart = new Line2EChartConfig(val)
          chart.setOption()
        }
      } else if (val === 'loan') {
        if (this.$refs.loan) {
          let chart = new barLineEChartConfig(val)
          chart.setOption()
        }
      }
    })
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
    if (this.$refs[this.tabName]) {
      let chart = new barLineEChartConfig(this.tabName)
      chart.setOption()
    }
    this.timer = setInterval(() => {
      this.clickTab(this.tabName === 'loan' ? 'credit' : 'loan')
    }, 30000)
  }
  beforeDestroy() {
    // 摧毁监听事件
    clearInterval(this.timer)
  }
  private methodExp() {
    // method创建地方
  }
  private clickTab(str: string) {
    this.tabName = str
  }
}
</script>

<style lang="scss" scoped>
.top-right {
  width: 4.08em;
  height: 3.77em;
  background: url('./../../../../assets/dashboard/top-chart.png') no-repeat
    center;
  background-size: cover;
  border-radius: 0.14em;
  &:hover {
    cursor: pointer;
    animation-name: glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }
  .chart-title {
    font-size: 0.2em;
    height: 3em;
    color: #2fd5ff;
    font-family: FZHei-B01S;
    font-weight: 400;
    line-height: 2em;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .self-tab {
    margin: 0 0.4em 0 0.2em;
    border-bottom: 1px solid rgb(23, 63, 91);
    display: flex;
    .tab-row {
      position: relative;
      height: 0.26em;
      width: 1em;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 0;
      & + .tab-row {
        margin-left: -0.05em;
      }
      &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: -1px;
        left: 0;
        background-color: rgb(8, 32, 76);
        z-index: -1;
        transform: scaleY(1.45) perspective(100px) rotateX(30deg);
        transform-origin: bottom left;
        border: 0.01em solid rgb(20, 72, 114);
      }
      .tab-word {
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        font-size: 0.12em;
        display: block;
        transition: all 0.1s;
      }
    }
    .tab-row-active {
      z-index: 1;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgb(8, 15, 49);
        z-index: -1;
        transform: scaleY(1.45) perspective(100px) rotateX(30deg);
        transform-origin: bottom left;
        border: 0.02em solid rgb(46, 174, 198);
        border-bottom: 0;
      }
      .tab-word {
        color: #fff;
        font-size: 0.14em;
      }
    }
  }
  .chart {
    margin: 0.12em 0.15em 0;
    height: 2.8em;
  }
}
</style>
